<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
●transform()矩阵变换
context.transform(ma1,ma2,mb1,mb2,dx,dy);
前4个参数：修改使用这个方法之后绘制图形时的计算方法，从而达到变形的目的；
dx/dy表示将坐标原点在x轴或y轴方向上移动；
各参数说明：水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动
1：平移：使用transform(1,0,0,1,x,y)或者transform(0,1,1,0,x,y)代替translate(x,y)；
2：缩放：使用transform(x,0,0,y,0,0)方法代替scale(x,y);
3：旋转: 使用transform(
Math.cos(angleMath.PI/180),
Math.sin(angleMath.PI/180),
-Math.sin(angleMath.PI/180),
Math.cos(angleMath.PI/180),
)
<script>
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillStyle = '#eee';
  ctx.fillRect(0, 0, 750, 600);

  var colors = ['#f00','#f90','#ff0','#090','#00f','#0051a1','#09f'];

  ctx.lineWidth = 10;
  // 不缩放，不倾斜，将原点在x轴方向平移100px;
  ctx.transform(1, 0, 0, 1, 100, 0);

  for(var i = 0; i < colors.length; i++) {
    ctx.beginPath();
    // 每次循环原点向右下移动10px,且倾斜0.03
    ctx.transform(1, 0, 0.03, 1, 10, 10);
    ctx.strokeStyle = colors[i];
    ctx.arc(150, 200, 150, 0, 2, true);
    ctx.stroke();
  }
</script>
●setTransform()矩阵变换

setTransform()方法将变换的矩阵进行重置，它把当前的变换矩阵重置为单位矩阵
context.setTransform(ma1,ma2,mb1,mb2,dx,dy)
各参数说明：水平旋转、水平倾斜、垂直倾斜、垂直缩放、水平移动、垂直移动
</body>
</html>
